<template>
   <div>
     <h3>{{info.data.popularScienceTitle}}</h3>
     <p><span>{{dateFormat(info.data.popularScienceAddTime)}}</span></p>
     <div class="enter">
       <img class="detailImg" :src="header+info.data.popularScienceImgPath" >
     </div>

     <div v-html="info.data.popularScienceContent" class="main">

     </div>
   </div>
</template>

<script>
    export default {
      name: "ScienceDetail",
      data() {
        return {
          header: "https://sy.mujiwulian.net/sy/",
          info: {
            code: null,
            msg: "",
            data: {
              id: null,
              popularScienceTitle: "",
              popularScienceImgPath: "",
              popularScienceAbs: "",
              popularScienceContent: "",
              popularScienceAddTime: ""
            }
          }
        }
      },
      mounted() {
        this.$axios
          .get("https://sy.mujiwulian.net/sy/website/science/detail/?sy=" +
            this.$store.getters.getUser.sy+"&id="+this.$route.params.id)
          .then(response=>(this.info=response.data));
      },
      methods:{
        dateFormat:function(time) {
          let date=new Date(time);
          let year=date.getFullYear();
          /* 在日期格式中，月份是从0开始的，因此要加0
           * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
           * */
          let month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
          let day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
          let hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
          let minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
          let seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
          // 拼接
          return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        }
      }
    }
</script>

<style scoped>
  h3{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 25px;
  }
  span{
    font-size: 12px;
    float: right;
  }
  .enter{
    display: block;
    text-align: center;
  }
  .enter >.detailImg{
    margin: 10px;
    clear: both;
    width: 90%;
    height:auto;
  }
  .main{
    margin: 10px;
    letter-spacing: 5px;
  }
</style>
